<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>roles_manage</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="/style/css/font.css">
		<link rel="stylesheet" href="/style/css/weadmin.css" />
		<link rel="stylesheet" href="/lib/layui/css/layui.css" />
		<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
		<script src="/style/js/rbac_Cookie.js"></script>
		<script>
			layui.use(['form'], function() {
				var form = layui.form,
					$ = layui.jquery;
				$(function() {
					
					if(pageloadauthority("/views/roles_manage.html")==true){
						$("body").attr("style","display:block;");
						return;
					}
					atuLoginToken();
				}) 
			});
		</script>
		<style type="text/css">
			.layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] {
				/* width: 100%; */
				padding-left: 28px;
			}
			.layui-table-tool-panel li {
				line-height: 30px;
				-webkit-transition: .5s all;
				transition: .5s all;
				padding-left: 10px;
				padding-right: 47px;
			}
		</style>
	</head>

	<body style="display: none;">
		<div class="weadmin-nav">
			<span class="layui-breadcrumb" style="visibility: visible;">
        <a href="">首页</a><span lay-separator="">/</span>
			<a href="">权限管理</a><span lay-separator="">/</span>
			<a>
				<cite>角色管理</cite></a>
			</span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
	
<!--表格-->
<div class="weadmin-body">  
			  <div class="layui-row">
 <table class="layui-hide" id="roleslist" lay-filter="rolestab"></table>
  </div>
 </div>
 

 
 <!--表格操作-->
 <script type="text/html" id="op">
		  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">删除</a>
		   <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="addpermisson">操作权限</a>
</script>

 <script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="locked" {{ d.available == true ? 'checked' : '' }}>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
     <button class="layui-btn layui-btn-sm" lay-event="addroles">添加角色</button>
  </div>
</script>

	</body>
		
		<script>
layui.use(['util','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var util = layui.util;
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
             ,form = layui.form;
       var logintoken=  getSharreTieba_LoginToken();

  table.render({
    elem: '#roleslist'
   ,even: true //开启隔行背景
    ,cellMinWidth: 80
     ,toolbar: '#toolbarDemo'
   ,url:'http://localhost:8086/permission/getlistRoles'
   ,where:{
                LoginKey:logintoken,
            }
    ,cols: [[  
     {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title: 'ID', sort: true}
      ,{field:'role', title: '角色名称',edit: 'text'}
      ,{field:'description', title: '角色描述', sort: true,edit: 'text'}
      ,{field:'pid', title: '父节点',edit: 'text'}
       ,{field:'available', title:'是否锁定', width:110, templet: '#checkboxTpl'}
      ,{fixed: 'right', title: '操作', align:'center', toolbar: '#op'}
    ]]
    ,page: true
  });

//监听修改操作
table.on('edit(rolestab)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    console.log(data);
   $.ajax({
   	type:"get",
   	url:"http://localhost:8086/permission/updateRoles",
   	async:true,
   	data:{'LoginKey':logintoken,'roles':JSON.stringify(data)},
   	success:function(json){
   		
     	}
   });
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });
  
//监听行工具事件
    table.on('tool(rolestab)', function(obj){ //注：tool 是工具条事件名，rolestab 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
               var a=  new Array();
                a.push(data);
            if(layEvent == 'detail'){
				console.log(data)
					 $.ajax({
	        	type:"post",
	        	url:"http://localhost:8086/permission/delectRoles",
	        	async:true,
	        	data:{'roles':JSON.stringify(a),'LoginKey':logintoken},
	        	success:function(json){
	        		  table.reload("roleslist");
	        	}
	        });
            }else if(layEvent == 'addpermisson'){
            	
            SetCookie('Addpermissions_roles_Id', obj.data.id ,1000*60*10);
            	layer.open({
			        type: 2
			        ,title: '操作权限' //不显示标题栏
			        ,shade: 0.8
			        ,area: [500 + 'px', 500 + 'px']
			        ,id: 'LAY_layuipro2' //设定一个id，防止重复弹出
			        ,btnAlign: 'c'
			        ,moveType: 1 //拖拽模式，0或者1
			        ,content: path+"/views/addsyspermissions.html"
			        ,success: function(layero){
			        
			        }
			      });
			      
            }  
            
        });
        
//监听表头  
 //删除操作
  table.on('toolbar(rolestab)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        $.ajax({
        	type:"post",
        	url:"http://localhost:8086/permission/delectRoles",
        	async:true,
        	data:{'roles':JSON.stringify(data),'LoginKey':logintoken},
        	success:function(json){
        		  table.reload("roleslist");
        	}
        });
      break;
       case 'addroles':
        var data = checkStatus.data;
        layer.open({
			        type: 2
			        ,title: '添加角色' //不显示标题栏
			        ,shade: 0.8
			        ,area: [500 + 'px', 500 + 'px']
			        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
			        ,btnAlign: 'c'
			        ,moveType: 1 //拖拽模式，0或者1
			        ,content: path+"/views/insert_roles.html"
			        ,success: function(layero){
			        
			        }
			      });
      break;
    };
  });  
  
/*锁定监控*/
//监听锁定操作
  form.on('checkbox(locked)', function(obj){
  	   console.log(this.value)
  		console.log(this.name)
  			console.log(obj.elem.checked)
  			console.log(obj.othis)
  			$.ajax({
  				type:"post",
  				url:"http://localhost:8086/permission/RolesLock",
  				async:true,
  				data:{'id':this.value,'lock':obj.elem.checked,'LoginKey':logintoken},
  				success:function(json){
  					console.log(json);
  				}
  			});
  });    
});
</script>

</html>
